<template>
  <div>
    <div class="title">{{ title }}</div>

    <slot></slot>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'SlottedChildren',
  data() {
    return {
      title: 'Slotted子组件'
    };
  }
});
</script>

<style scoped>
.title {
  font-weight: bold;
  font-size: 20px;
}

:slotted(.title-slot) {
  color: pink;
}
</style>